{% extends "member/layout.html" %}

{% block title %}审批详情 - {{ approval.project.name }}{% endblock %}

{% block content %}
<div class="d-flex flex-column h-100">
    <!-- 页面标题区域 -->
    <div class="mb-4">
        <div class="d-flex align-items-center justify-content-between">
            <h2 class="h3 fw-bold mb-0">
                <i class="fas fa-clipboard-check me-2 text-primary"></i>审批详情
            </h2>
            <a href="{{ url_for('member.approval.review_list') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>
        <hr class="mt-2 mb-4">
    </div>

    <!-- 审批信息卡片 -->
    <div class="dashboard-card p-4 flex-grow-1">
        <div class="row h-100">
            <!-- 左侧：项目信息和状态 -->
            <div class="col-lg-8 border-end pe-4">
                <!-- 项目信息 -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">项目详情</h6>
                    <div class="d-flex align-items-center mb-3">
                        <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                            <i class="fas fa-folder text-primary fa-lg"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h5 class="fw-bold mb-1">项目名：{{ approval.project.name }}</h5>
                            <p class="text-muted mb-0">介绍：{{ approval.project.description or '无' }}</p>
                        </div>
                    </div>
                </div>

                <!-- 审批状态 -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">审批状态</h6>
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0 me-4">
                            <div class="avatar-lg bg-{{ 'success' if approval.status == 'approved' else 'danger' if approval.status == 'rejected' else 'warning' }} bg-opacity-10 text-{{ 'success' if approval.status == 'approved' else 'danger' if approval.status == 'rejected' else 'warning' }} rounded-circle d-flex align-items-center justify-content-center">
                                <i class="fas {{ 'fa-check-circle' if approval.status == 'approved' else 'fa-times-circle' if approval.status == 'rejected' else 'fa-clock' }} fa-xl"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1">
                            <h4 class="fw-bold text-{{ 'success' if approval.status == 'approved' else 'danger' if approval.status == 'rejected' else 'warning' }} mb-2">
                                {{ approval.status_label }}
                            </h4>
                            <p class="text-muted mb-0">
                                {% if approval.status == 'pending' %}
                                    此项目正在等待您的审批
                                {% elif approval.status == 'approved' %}
                                    此项目已通过审批，可以开始执行
                                {% else %}
                                    此项目已被拒绝，需要重新提交
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>

                <!-- 审批说明 -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">审批说明</h6>
                    <div class="bg-light rounded p-3">
                        <p class="mb-0">{{ approval.notes or '无' }}</p>
                    </div>
                </div>

                <!-- 审批操作 -->
                {% if approval.status == 'pending' and approval.reviewer_id == current_member.id %}
                <div class="border-top pt-4">
                    <h6 class="fw-bold mb-3">审批操作</h6>
                    {% if approval.is_closure_review %}
                    <div class="alert alert-success mb-4">
                        <i class="fas fa-flag-checkered me-2"></i>此为项目结项审批
                    </div>
                    {% endif %}
                    <form method="post" action="{% if approval.is_closure_review %}{{ url_for('member.jira.approve_project_closure', project_id=approval.project_id) }}{% else %}{{ url_for('member.approval.review', approval_id=approval.id) }}{% endif %}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="mb-4">
                            <label for="notes" class="form-label fw-medium">审批意见</label>
                            <textarea class="form-control" id="notes" name="notes" rows="4" placeholder="请输入审批意见..." required></textarea>
                            <div class="form-text">请详细说明审批通过或拒绝的理由。</div>
                        </div>
                        <div class="d-flex justify-content-start gap-3">
                            <button type="submit" name="action" value="reject" class="btn btn-outline-danger px-4 py-2">
                                <i class="fas fa-times me-2"></i>拒绝申请
                            </button>
                            <button type="submit" name="action" value="approve" class="btn btn-primary px-4 py-2">
                                <i class="fas fa-check me-2"></i>通过申请
                            </button>
                        </div>
                    </form>
                </div>
                {% endif %}

                <!-- 审批流程 -->
                {% if approval.project.approval_flow %}
                <div class="border-top pt-4">
                    <h6 class="fw-bold mb-3">审批流程</h6>

                    <!-- 审批流程进度条 -->
                    <div class="mb-4">
                        <div class="progress" style="height: 25px;">
                            {% set total_steps = approval.project.approval_flow.steps|length %}
                            {% if approval.project.first_approver %}
                                {% set total_steps = total_steps + 1 %}
                            {% endif %}
                            {% set completed_steps = history|selectattr('status', 'equalto', 'approved')|list|length %}
                            {% set progress = (completed_steps / total_steps * 100) if total_steps > 0 else 0 %}

                            <div class="progress-bar bg-primary" role="progressbar"
                                 style="width: {{ progress }}%;"
                                 aria-valuenow="{{ progress }}"
                                 aria-valuemin="0"
                                 aria-valuemax="100">
                                {{ completed_steps }}/{{ total_steps }} 步完成
                            </div>
                        </div>
                    </div>

                    <!-- 审批步骤列表 -->
                    <div class="list-group">
                        {# 单独处理第一审批人 #}
                        {% if approval.project.first_approver %}
                        {% set first_approver_review = history|selectattr('step_order', 'equalto', 0)|first %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div>第一审批人：{{ approval.project.first_approver.name }}</div>
                                <div class="small text-muted">
                                    {% if first_approver_review %}
                                        状态：{{ first_approver_review.status_label }}
                                        {% if first_approver_review.reviewed_at %}
                                            - 审批时间：{{ first_approver_review.reviewed_at.strftime('%Y-%m-%d %H:%M') }}
                                        {% endif %}
                                    {% else %}
                                        状态：待审批
                                    {% endif %}
                                </div>
                            </div>
                            <span class="badge bg-{% if first_approver_review and first_approver_review.status == 'approved' %}success
                                  {% elif first_approver_review and first_approver_review.status == 'rejected' %}danger
                                  {% elif approval.step_id is none %}warning
                                  {% else %}secondary{% endif %}">
                                {% if first_approver_review %}
                                    {{ first_approver_review.status_label }}
                                {% elif approval.step_id is none %}
                                    当前审批
                                {% else %}
                                    待审批
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}

                        {# 处理流程中的其他步骤 #}
                        {% for step in approval.project.approval_flow.steps|sort(attribute='order') %}
                        {% set step_review = history|selectattr('step_order', 'equalto', step.order)|first %}
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <div>第{{ step.order }}步：{{ step.user.name if step.user else '未指定审批人' }}</div>
                                <div class="small text-muted">
                                    {% if step_review %}
                                        状态：{{ step_review.status_label }}
                                        {% if step_review.reviewed_at %}
                                            - 审批时间：{{ step_review.reviewed_at.strftime('%Y-%m-%d %H:%M') }}
                                        {% endif %}
                                    {% else %}
                                        状态：待审批
                                    {% endif %}
                                </div>
                            </div>
                            <span class="badge bg-{% if step_review and step_review.status == 'approved' %}success
                                  {% elif step_review and step_review.status == 'rejected' %}danger
                                  {% elif approval.step_id == step.id %}warning
                                  {% else %}secondary{% endif %}">
                                {% if step_review %}
                                    {{ step_review.status_label }}
                                {% elif approval.step_id == step.id %}
                                    当前审批
                                {% else %}
                                    待审批
                                {% endif %}
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>

            <!-- 右侧：详细信息 -->
            <div class="col-lg-4 ps-4">
                <!-- 提交信息 -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">提交信息</h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">提交人</p>
                                <p class="fw-bold mb-0">{{ approval.submitter.name }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">提交时间</p>
                                <p class="fw-bold mb-0">{{ approval.created_at.strftime('%Y-%m-%d %H:%M') }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">项目编号</p>
                                <p class="fw-bold mb-0">{{ approval.project.id }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 项目成员 -->
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">项目成员</h6>
                    <div class="bg-light rounded p-3">
                        <div class="d-flex flex-wrap gap-2">
                            {% for member in approval.project.members %}
                            <div class="badge bg-primary bg-opacity-10 text-primary py-2 px-3">
                                <i class="fas fa-user me-1"></i>{{ member.member.name }}
                            </div>
                            {% else %}
                            <div class="text-muted">暂无项目成员</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- 审批信息 -->
                {% if approval.status != 'pending' %}
                <div class="mb-4">
                    <h6 class="fw-bold mb-3">审批信息</h6>
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">审批人</p>
                                <p class="fw-bold mb-0">{{ approval.reviewer.name if approval.reviewer else '未知' }}</p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">审批时间</p>
                                <p class="fw-bold mb-0">
                                    {% if approval.reviewed_at %}
                                        {{ approval.reviewed_at.strftime('%Y-%m-%d %H:%M') }}
                                    {% else %}
                                        未审批
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="bg-light rounded p-3">
                                <p class="text-muted small mb-1">审批意见</p>
                                <p class="fw-medium mb-0">{{ approval.review_notes or '无' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<style>
.avatar-sm {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.avatar-lg {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

.dashboard-card {
    margin-top: 0 !important;
    padding: 2rem !important;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.badge {
    font-weight: 500;
    border-radius: 6px;
}

@media (max-width: 992px) {
    .border-end {
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,.1);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .ps-4 {
        padding-left: 0 !important;
    }
}

.dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.bg-light {
    background-color: var(--light-bg) !important;
}

.border-end {
    border-right: 1px solid rgba(0,0,0,.1) !important;
}
</style>
{% endblock %}

